<template>
  <el-scrollbar class="el-scrollbar">
    <!-- 直接使用 posts.list 渲染列表 -->
    <view v-for="post in posts.list" :key="post.postId" class="each-views">
      <view class="post-header">
        <img class="avatar" src="https://treedong.com/content/templates/Alpha/assets/images/momo.webp">
        <view class="user-information">
          <text class="hide-name">匿名</text>
          <view class="publish-infor">
            <view class="publish-time">{{ formatTime(post.createTime) }}</view>
            <view class="location-infor">
              <i class="bi bi-geo-alt"></i>
              <text class="publish-location">湖南</text>
            </view>
          </view>
        </view>
      </view>
      
      <view class="post-content">
        <text class="post-title">{{ post.title }}</text>
        <text class="preview">{{ truncateText(post.content, 100) }}</text>
      </view>
      
      <view class="post-footer">
        <view class="orgin-articel-button" @click="showDetail(post.postId)">
          <i class="bi bi-arrow-up-right-square"></i>
          <view class="orgin-articel">原文</view>
        </view>
        <view class="like-button">
          <i class="bi bi-heart"></i>
          <view class="like-count">{{ post.likeCount }}</view>
        </view>
        <view class="comment-button">
          <i class="bi bi-chat-left-text"></i>
          <view class="comment">评论</view>
        </view>
      </view>
    </view>
    
    <!-- 分页信息展示 -->
    <view class="pagination-info" v-if="posts.list && posts.list.length">
      共 {{ posts.total }} 条，当前 {{ posts.page }}/{{ posts.totalPages }} 页
    </view>
    
    <!-- 空状态提示 -->
    <view v-if="!posts.list || !posts.list.length" class="empty-tips">
      暂无帖子数据
    </view>
  </el-scrollbar>
</template>

<script>
export default {
  name: 'PostListScroll',
  props: {
    posts: {
      type: Object,
      required: true,
      default: () => ({
        total: 0,
        totalPages: 0,
        pageSize: 10,
        page: 1,
        list: []
      })
    }
  },
  emits: ['view-detail'],
  methods: {
    showDetail(post) {
      this.$emit('view-detail', post);
    },
    
    truncateText(text, maxLength) {
      if (!text) return '';
      return text.length > maxLength ? text.slice(0, maxLength) + '...' : text;
    },
    
    formatTime(timestamp) {
      if (!timestamp) return '';
      const date = new Date(timestamp);
      const now = new Date();
      const diff = now - date;
      const day = 24 * 60 * 60 * 1000;
      
      if (diff < day) return '今天';
      if (diff < 7 * day) return `${Math.floor(diff/day)}天前`;
      
      return `${date.getFullYear()}-${(date.getMonth()+1).toString().padStart(2,'0')}-${date.getDate().toString().padStart(2,'0')}`;
    }
  }
};
</script>

<style scoped>
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css");
/* 原有样式保持不变 */
.el-scrollbar {
  border-radius: 10px;
  overflow: auto;
  width: 100%;
}
.each-views {
  padding: 32px;
  display: flex;
  flex-direction: column;
  background-color: #fff;
  border-radius: 10px;
  margin: 15px 10px;
  box-shadow: #9a96aa3b;
}
.post-header {
  height: 45px;
  display: flex;
  align-items: center;
}
.avatar {
  height: 45px;
  margin-right: 10px;
  border-radius: 8px;
}
.user-information {
  display: flex;
  flex-direction: column;
  width: 200px
}
.hide-name {
  height: 21px;
  margin-bottom: 6px;
}
.publish-infor {
  display: flex;
  height: 18px;
}
.publish-time {
  font-size: 85%;
  margin-right: 25px;
  color: #4b5563 !important;
}
.bi-geo-alt {
  font-size: 80%;
  color: rgb(111, 136, 255);
}
.publish-location {
  font-size: 85%;
  color: #4b5563 !important;
}
.post-content {
  margin: 15px 0;
  color: #203656;
  font-size: 16px;
  line-height: 180%;
  letter-spacing: 0;
}
.post-title {
  font-weight: bold;
  display: block;
  margin-bottom: 8px;
}
.post-footer {
  display: flex;
  color:#5f8dee; 
  align-items: center;
  height: 16px;
}
.orgin-articel-button {
  transition: 0.3s;
  display: flex;
}
.bi-arrow-up-right-square {
  color: #5f8dee;	
  margin-right: 2px;
}
.orgin-articel {
  font-size: 15px;
  margin-right: 16px;
}
.like-button, .comment-button {
  display: flex;
  align-items: center;
  margin-right: 16px;
}
.bi-heart, .bi-chat-left-text {
  margin-right: 2px;
}
.like-count, .comment {
  font-size: 15px;
}
.empty-tips {
  text-align: center;
  padding: 20px;
  color: #999;
}
.pagination-info {
  text-align: center;
  padding: 10px;
  color: #666;
  font-size: 14px;
}
</style>